<template>
  <div class="loan">
    <Top title="贷款" iconShow="0"></Top>
    <tab bar-active-color="#30ccdb" active-color="#30ccdb" line-width.sync="2" :custom-bar-width="getBarWidth">
      <!-- <tab-item @on-item-click="handler(navList.sortInfoId)" selected>
                  <div class="navBar">{{navList.sortAllName}}</div>
                </tab-item> -->
      <tab-item @on-item-click="handler(item.sortInfoId)" v-for="(item,indexc) in navList" :key="indexc" :selected='index==indexc+1'>
        <div class="navBar">{{item.sortAllName}}</div>
      </tab-item>
    </tab>
    <div class="loan-content" v-for="(item,index) in dataList" :key="index">
      <div class="loan-content-logo">
        <div class="loan-content-logo-img" @click="goDetail(item.platformId)">
          <img :src="item.logo||'static/img/user.png'" alt="贷款">
        </div>
      </div>
      <div class="loan-content-detail">
        <div class="loan-content-detail-top clearfix">
          <div class="loan-content-detail-top-left">
            <p @click="goDetail(item.platformId)">{{item.abbreviation}}</p>
            <div>
              <ul class="clearfix">
                <li v-for="(itemC,idx) in item.label.split(',')" :key="idx">{{itemC}}</li>
              </ul>
            </div>
          </div>
          <div class="loan-content-detail-top-right">
            <mt-button type="primary" @click="goDetail(item.platformId)">
              立即申请
            </mt-button>
          </div>
        </div>
        <div class="loan-content-detail-mid">
          <span>¥</span>
          <span>{{item.quato}}</span>
          <span>额度范围&nbsp;(元)</span>
        </div>
        <div class="loan-content-detail-bot">
          <ul>
            <li>{{item.lendSpeed}}放款</li>
            <li>参考日费率:{{item.dailyInterestRate}}%</li>
            <li>贷款期限{{item.maxCycle}}</li>
          </ul>
        </div>
      </div>
    </div>
    <load-more :tip="('加载中...')" v-if="loadMoreShow"></load-more>
    <load-more :show-loading="false" :tip="('没有更多了')" background-color="#f5f5f5" v-if="noMoreShow"></load-more>
    <!-- <div class="loan-float" @click="goStar">
      <img :src="float.logo">
      <div class="title">{{float.abbreviation}}</div>
      <div class="hot">HOT</div>
    </div> -->
  </div>
</template>
<script>
import Top from '../../components/Header'
import util from '../../js/util/util'
import { Tab, TabItem, LoadMore, cookie } from 'vux'
import { MessageBox } from 'mint-ui'
export default {
  name: '',
  components: { Top, Tab, TabItem, LoadMore },
  data() {
    return {
      navList: [],
      navListOther: [],
      dataList: [],
      index: 0,
      pageNum: 1,
      flag: true,
      loadMoreShow: false,
      noMoreShow: false,
      float:{
        logo:'',
        abbreviation:''
      }
    }
  },
  mounted() {
    document.setTitle('贷款');
    if(this.$route.query.channel){
      window.sessionStorage.setItem('channel',this.$route.query.channel);
    }
    this.$http.get("/loansupermarket-app/platform/getPlatformSortName")
      .then((response) => {
        var resBody = response.body;
        if (resBody.code == '000') {
          // 如果接口请求成功列表实例化
          this.navList = resBody.data;
        } else {
          MessageBox.alert(resBody.mesg);
        }
      })
    // 监听路由变化，让nav的active指向相应的位置并且调准接口
    if (this.$route.query.index) {
      this.index = this.$route.query.index;
      this.handler(this.index);
    } else {
      this.handler(this.index + 1);
    }

    // 悬浮框
    // this.$http.get("/loansupermarket-app/platform/getPlatformDetail?status=1")
    //   .then((response) => {
    //     var resBody = response.body;
    //     if (resBody.code == '000') {
    //       this.float.logo=resBody.data.logo;
    //       this.float.abbreviation=resBody.data.abbreviation.substring(0,4);
    //     } else {
    //       MessageBox.alert(resBody.mesg, '提示');
    //     }
    //   })

  },
  watch: {
    // 根据index变化，请求相应排序功能的接口
    index(curVal, oldVal) {
      
      this.$http.get("/loansupermarket-app/platform/getPlatformList?pageNum=1&pageSize=6&sortInfoId=" + curVal)
        .then((response) => {
          // 当index变化以后，重置当前排序列表页数
          this.pageNum = 1;
          // 立一个flag防止接口重复请求
          this.flag = true;
          // ‘没有更多了’ 不显示
          this.noMoreShow = false;
          var resBody = response.body;
          if (resBody.code == '000') {
            // 列表实例化
            this.dataList = resBody.data;
            // 如果当前页数的数据长度小于6，那么说明当前页是最后一页，让flag=false不再调用接口
            if (resBody.data.length < 6) {
              this.noMoreShow = true;
              this.flag = false;
            } else {
              this.flag = true;
            }
            // 每当index变化，他的滚动条要滚到最上面，要不然会造成滚动条在很下面然而并没有数据反馈
            document.body.scrollTop = 0;
          } else {
            MessageBox.alert(resBody.mesg);
          }
        })
        
    }
  },
  created() {
    var _this = this;
    // 当dom元素创建完成后，监听滚动条
    this.$nextTick(function() {
      window.addEventListener('scroll', onScroll)
    })
    function onScroll() {
      var scrollTop = document.body.scrollTop;
      var innerHeight = window.innerHeight;
      var offsetHeight = document.body.offsetHeight;
      if (scrollTop + innerHeight >= offsetHeight) {
        if (_this.flag) {
          _this.flag = false;
          // 当滚动条到下面，加载分页数据
          _this.getList()
        }
      }
    }
  },
  methods: {
    // 点击nav，确定标记
    handler(index) {
      this.index = index;
    },
    // nav下面线条的宽度
    getBarWidth: function(index) {
      return 52 + 'px'
    },
    // 加载分页数据
    getList() {
      // 页数加一
      this.pageNum += 1;
      this.loadMoreShow = true;
      var _this = this;
      setTimeout(function() {
        _this.$http.get("/loansupermarket-app/platform/getPlatformList?pageNum=" + _this.pageNum + "&pageSize=6&sortInfoId=" + _this.index)
          .then((response) => {
            _this.loadMoreShow = false;
            var resBody = response.body;
            if (resBody.code == '000') {
              // 加载完分页数据后，拼接到前面加载好的的数组
              _this.dataList = _this.dataList.concat(resBody.data);
              if (resBody.data.length < 6) {
                // 当前页加载的条数小于6条时，说明最后一页，加载loading关闭
                _this.noMoreShow = true;
                _this.flag = false;
              } else {
                _this.flag = true;
              }
            } else {
              MessageBox.alert(resBody.mesg);
            }
          })
      }, 500)
    },
    // 非明星产品进入产品详情页   非明星产品status=2，明星产品status=1
    goDetail(id) {
        var token = cookie.get('token');
      this.$router.push({ path: '/loanplatformdetail', query: { id, id, status: 2, index: this.index } })
      //注意这个请求是为后面的我的足迹中的产品添加记录
      this.$http.post('/loansupermarket-app/foot/insertInformationVisit',{token:cookie.get('token'),visitType:3,informationId:id}).then(()=>{
      });
    },
    // 进入明星产品  
    goStar() {
      var token = cookie.get('token') || '';
      this.$http.post("/loansupermarket-app/platform/visitCount", { token: token, starPlatformId: 0,phone:window.sessionStorage.getItem('phone'),channel:window.sessionStorage.getItem('channel')?window.sessionStorage.getItem('channel'):'' })
        .then(function(response) {
          if (response.body.code == '000') {
            this.$router.push({ path: '/loanplatformdetail', query: { status: 1 } })
          }
        })
    }
  },
}
</script>
<style lang="scss">
@import '../../scss/variable/base.scss';

.loan {

  .vux-tab {
    margin-top: 1.2rem;
    position: fixed !important;
    width: 100%;
    top: 0;
    background: #fff;
    z-index: 3;
    height: 1.2rem;
  }

  .weui-loadmore {
    margin-top: 0.2rem !important;
  }
  .weui-loadmore_line {
    margin-top: 0.6rem !important;
  }
  .navBar {
    border-right: 1px solid $borderColor; // color: $primaryColor;
    height: 20px;
    line-height: 20px;
    font-size: 0.4rem;
    margin-top: 10px;
  }

  .navBar:nth-of-type(4) {
    border-right: 1px solid #fff !important;
  }

  box-sizing: border-box;
  padding-top: 2.35rem;
  margin-bottom: 1.35rem;
  &-content {
    width: 100%;
    // height: 3.44rem;
    margin-top: 0.27rem;
    display: flex;
    &-logo {
      flex: 2;
      background: #fff;
      padding: 0.3rem 0;
      &-img {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
        margin: 0.4rem auto;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    &-detail {
      flex: 8;
      background: #fff;
      padding: 0.3rem 0;
      &-top {
        // height: 1.54rem;
        &-left {
          float: left;
          text-align: left;
          width: 5.5rem;
          p {
            text-align: left;
            margin-top: 0.38rem;
            height: 0.4rem;
            font-size: 0.42rem;
          }
          ul {
            margin-top: 0.32rem;
            li {
              float: left;
              width: 1.32rem;
              height: 0.45rem;
              border: 1px solid $grayColor;
              text-align: center;
              line-height: 0.45rem;
              border-radius: 0.12rem;
              margin-right: 0.13rem;
              color: $grayColor;
              margin-top: 0.1rem;
              font-size: 12px;
            }
          }
        }
        &-right {
          float: left;
          width: 2.3rem;
          .mint-button {
            margin-top: 0.4rem;
            font-size: 0.36rem;
            height: 0.9rem;
          }
        }
      }
      &-mid {
        height: 0.4rem;
        margin-top: 0.3rem;
        text-align: left;
        span:nth-of-type(1) {
          color: $redColor;
          font-size: 0.42rem;
        }
        span:nth-of-type(2) {
          color: $redColor;
          font-size: 0.5rem;
          margin-left: 0.1rem;
        }
        span:nth-of-type(3) {
          color: $grayColor;
          font-size: 0.3rem;
          margin-left: 0.25rem;
        }
      }
      &-bot {
        ul {
          padding: 0.35rem 0;
          li {
            float: left;
            padding: 0 0.2rem;
            font-size: 0.3rem;
            &:nth-of-type(1) {
              padding-left: 0;
            }
            &:nth-of-type(2) {
              border-left: 1px solid $borderColor;
              border-right: 1px solid $borderColor;
            }
          }
        }
      }
    }
  }
  &-float {
    width: 2.88rem;
    height: 3.12rem;
    position: fixed;
    bottom: 2.26rem;
    right: 0rem;
    background: red;
    // border-radius: 50%;
    // background: url('../../assets/xuanfu.png');
    background: url('../../assets/float.png');
    background-size: contain;
    animation: myfirst 1.5s infinite linear;
    img{
      width: 1.2rem;
      height: 1.2rem;
      border-radius: 50%;
      margin-top: 0.51rem;
    }
    .title{
      color:#ff5b52;
      font-size: 0.3rem;
    }
    .hot{
      position: absolute;
      top: 0.51rem;
      right:0.53rem;
      background: url('../../assets/hot.png');
      background-size: contain;
      color:#fff;
      font-size:12px;
      padding: 2px;
    }
  }
  @-webkit-keyframes myfirst {
    0% {
      right: 0rem;
    }
    50% {
      right: 0.4rem;
    }
    100% {
      right: 0
    }
  }
}

.clearfix::after,
.clearfix::before {
	content: ".";
	line-height: 0;
	height: 0;
	display: block;
	visibility: hidden;
	clear: both;
}

.clearfix {
	*zoom: 1;
}




</style>

